<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<style>
    .main-container{
        margin:35px auto auto auto;
        position:relative;
        width:84%;
    }
    .post-title{
        border:1px solid #eee;
        border-left-width:5px;
        border-left-color:#f0ad4e;
        margin:10px
    }
    .li-style{
        color: #777777;
        list-style:none;
        float:left;
        margin-right: 10px;
    }
    .blog-hr{
        margin:50px 0;
    }
</style>
<div class="container main-container">
<div class="row">
    <div class="col-md-9">
        <c:forEach items="${page.list}" var="post">
            <article>
                <h3><b><a href="/blogcontent?id=${post.id}" style="text-decoration:none;color: #000000;">${post.title}<span class="badge">${post.reading_quantity}</span></a></b></h3>
                <ui>
                    <li class="li-style" ><span class="glyphicon glyphicon-time"/><fmt:parseDate  value="${post.create_time}" pattern="yyyy-MM-dd HH:mm:ss" var="date"/> <fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm:ss"/></li>
                    <li class="li-style" ><span class="glyphicon glyphicon-tag"/>${post.bl_blog_tag.tag}</li>
                    <%--<li class="li-style" ><span class="glyphicon glyphicon-stats"/>${post.reading_quantity}</li>--%>
                </ui></br>
                <p style="margin:10px 0">${post.content_breviary}</p>
            </article>
            <hr class="div blog-hr">
        </c:forEach>
        <div>
            <%--<ul class="pagination pagination-lg">--%>
                <%--<li><a href="#">«</a></li>--%>
                <%--<li class="active"><a href="#">1</a></li>--%>
                <%--<li><a href="#">2</a></li>--%>
                <%--<li><a href="#">3</a></li>--%>
                <%--<li><a href="#">4</a></li>--%>
                <%--<li><a href="#">5</a></li>--%>
                <%--<li><a href="#">»</a></li>--%>
            <%--</ul>--%>
                <ul class="pager">
                    <c:if test="${page.hasPreviousPage}">
                        <%--<li class="previous disabled" onclick="Older()"><a href="/?pageNum=${page.prePage}">&larr;Older</a></li>--%>
                        <li class="previous"><a href="/?pageNum=${page.prePage}">&larr;上一页</a></li>
                    </c:if>
                    <c:if test="${page.hasNextPage}">
                        <li class="next"><a href="/?pageNum=${page.nextPage}">下一页 &rarr;</a></li>
                    </c:if>
                </ul>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">最新访客</h3>
            </div>
            <div class="panel-body">
                <ul class="ds-recent-visitors" style="margin:0;border:0;padding:0;"></ul>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    //
    <!--多说js加载开始，一个页面只需要加载一次 -->
    var duoshuoQuery = {short_name: "an0nymouscoding"};
    (function () {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';
        ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    <!--多说js加载结束，一个页面只需要加载一次 -->
</script>